|
- import type {GetStaticPaths, GetStaticProps, NextPage} from 'next';
- import * as fs from 'fs/promises';
- import * as path from 'path';
- import * as React from 'react'
- import {useRouter} from 'next/router';
- import ReactMarkdown from 'react-markdown';
- import {DocsLayout, Page} from '@/components/DocsLayout';
-
- export interface Props {
- componentPages: { name: string; components: Page[] }[],
- docsPages: Page[],
- examplePages: Page[],
- markdown: string,
- }
-
- const InnerPage: NextPage<Props> = ({
- componentPages,
- examplePages,
- docsPages,
- markdown,
- }) => {
- const router = useRouter();
- const sidebarOpen = router.query.open === 'sidebar';
-
- return (
- <DocsLayout
- componentPages={componentPages}
- examplePages={examplePages}
- docsPages={docsPages}
- sidebarOpen={sidebarOpen}
- >
- {markdown && (
- <ReactMarkdown
- className="my-12 leading-loose"
- components={{
- ul: ({node, ordered: _ordered, ...props}) => (
- <ul
- {...props}
- className="list-disc pl-4"
- />
- ),
- li: ({node, ...props}) => (
- <li
- {...props}
- className="list-item pl-4"
- />
- ),
- }}
- >
- {markdown}
- </ReactMarkdown>
- )}
- <pre>
- <code>
- {JSON.stringify(componentPages, null, 2)}
- </code>
- </pre>
- </DocsLayout>
- )
- }
-
- export const getStaticProps: GetStaticProps = async (ctx) => {
- const { params } = ctx;
- const { url } = params as { url: string[] };
- const [platform, framework, ...etcUrl] = url;
-
- const props = {} as Record<string, unknown>;
-
- const docsPath = path.resolve('../../docs');
- const docs = await fs.readdir(docsPath);
- props.docsPages = docs.map((d) => ({
- id: d,
- href: `/docs/${d}`,
- label: d
- .split('-')
- .slice(1)
- .map((dd) => dd.slice(0, 1).toUpperCase() + dd.slice(1))
- .join(' ')
- .replace(/\.md/i, '')
- }));
-
- // const categoriesPath = path.resolve('../../categories');
- // const categories = await fs.readdir(categoriesPath);
- // props.componentPages = categories.map((c) => ({
- // id: c,
- // href: `/categories/${c}`,
- // label: c.split('-').map((cc) => cc.slice(0, 1).toUpperCase() + cc.slice(1)).join(' '),
- // }));
-
- // const pagesPath = path.resolve('src/pages');
- // const examplesPath = path.resolve(pagesPath, 'examples');
- // const examplesRaw = await fs.readdir(examplesPath);
- // const examplesIndexPage = await Promise.all(
- // examplesRaw.map(async (c) => {
- // const indexPath = await path.resolve(examplesPath, c, 'index.tsx');
- // try {
- // const statResult = await fs.stat(indexPath);
- // return [c, statResult.isFile()];
- // } catch {
- // // noop
- // }
- //
- // return [c, false];
- // })
- // ) as [string, boolean][];
- // const examples = examplesIndexPage
- // .filter(([, hasIndexPage]) => hasIndexPage)
- // .map(([key]) => key);
- // props.examplePages = examples.map((e) => ({
- // id: e,
- // href: `/examples/${e}`,
- // label: e.split('-').map((ee) => ee.slice(0, 1).toUpperCase() + ee.slice(1)).join(' '),
- // }));
-
- const isHome = !Array.isArray(params.url);
- if (isHome) {
- const readmePath = path.resolve('../../README.md');
- props.markdown = await fs.readFile(readmePath, 'utf-8');
- }
-
- const theParamsUrl = params.url as string[];
- const isDocs = Array.isArray(theParamsUrl) && theParamsUrl[0] === 'docs';
- if (isDocs) {
- const docsPath = path.resolve('../../docs', theParamsUrl[1] as string);
- props.markdown = await fs.readFile(docsPath, 'utf-8');
- }
-
- const typedocData = await fs.readFile('typedoc.data.json', 'utf-8');
- const project = JSON.parse(typedocData) as any;
-
- props.componentPages = project.children.reduce(
- (theComponents, pkg) => {
- const packageNameFragments = pkg.name.split('-');
- const packageFramework = packageNameFragments.pop();
- const categoryBaseName = packageNameFragments.pop();
-
- console.log(packageFramework, categoryBaseName);
-
- if (theComponents.some((c) => c.name === categoryBaseName)) {
- return theComponents.map((cc) => {
- if (cc.name !== categoryBaseName) {
- return cc;
- }
-
- let components = [];
- if (packageFramework === 'react') {
- components = pkg.children
- .filter((exported) => {
- return exported.kind === 64; // Function, these are react components
- })
- .map((component) => {
- return {
- ...component,
- id: component.name,
- href: `/categories/${categoryBaseName}/${component.name}`,
- label: component.name,
- descriptionMarkdown: component.signatures[0].comment.summary.reduce(
- (theText, t) => {
- if (t.kind === 'text') {
- return `${theText}${t.text}`;
- }
- if (t.kind === 'inline-tag' && t.tag === '@link') {
- return `${theText}[${t.text}](#)` // TODO set URL
- }
- return theText;
- },
- ''
- ),
- };
- });
- }
-
- return {
- ...cc,
- name: categoryBaseName,
- packages: {
- ...(cc.packages ?? {}),
- [packageFramework]: {
- components,
- },
- },
- };
- })
- }
-
- let components = [];
- if (packageFramework === 'react') {
- components = pkg.children
- .filter((exported) => {
- return exported.kind === 64; // Function, these are react components
- })
- .map((component) => {
- return {
- ...component,
- id: component.name,
- href: `/categories/${categoryBaseName}/${component.name}`,
- label: component.name,
- descriptionMarkdown: component.signatures[0].comment.summary.reduce(
- (theText, t) => {
- if (t.kind === 'text') {
- return `${theText}${t.text}`;
- }
- if (t.kind === 'inline-tag' && t.tag === '@link') {
- return `${theText}[${t.text}](#)` // TODO set URL
- }
- return theText;
- },
- ''
- ),
- };
- });
- }
-
- return [
- ...theComponents,
- {
- name: categoryBaseName,
- packages: {
- [packageFramework]: {
- components,
- }
- }
- }
- ]
- },
- [],
- );
-
- return {
- props,
- };
- };
-
- export default InnerPage;
-
- export const getStaticPaths: GetStaticPaths = async () => {
- const docsPath = path.resolve('../../docs');
- const docs = await fs.readdir(docsPath);
-
- const categoriesPath = path.resolve('../../categories');
- const categories = await fs.readdir(categoriesPath);
-
- return {
- paths: [
- ...docs.map((d) => `/docs/${d}`),
- ],
- fallback: true,
- };
- };
|